<template>
  <zm-panel :visible.sync="value" @change="close" class="panelContainer">
     <div slot="title">
        <div class="dib">{{ data.name }}</div>
        <tag-type
          :value="receiveDesc.value"
          :msg="receiveDesc.name"
        />
      </div>
    <app-block v-if="!loading">
      <el-tabs v-model="form.tabType" class="wp100 vm">
        <el-tab-pane :label="item.label" :name="item.value" v-for="(item, index) in OPERATE_TAB" :key="index" />
      </el-tabs>
      <component :is="form.tabType" :obj="data"></component>
    </app-block>
    <div slot="footer" class="tr"></div>
  </zm-panel>
</template>

<script>
import panelMixin from '@/mixins/panelMixin'
import { OPERATE_TAB } from './const'
import dataInfo from './components/dataInfo'
import outstandInfo from './components/outstandInfo' // 回款记录
import invoiceInfo from './components/invoiceInfo' // 发票记录
import activeInfo from './components/activeInfo' // 卡券激活
import refundInfo from './components/refundInfo' // 退货记录

import TagType from '@/components/TagType'

import {getPlanInfo} from '@/api/src/returnedPlan'
import { getBaseData } from '@/utils/store'

export default {
  components: { dataInfo, outstandInfo, invoiceInfo, activeInfo, refundInfo, TagType },
  mixins: [panelMixin],
  data () {
    return {
      form: {
        tabType: 'dataInfo'
      },
      data: this.obj,
      loading: false
    }
  },
  computed: {
    OPERATE_TAB () {
      return OPERATE_TAB.filter(item => {
        return item.value !== 'activeInfo' && item.value !== 'refundInfo'
      })
    },
    receiveDesc () {
      const list = getBaseData()
      console.log(list.payStatus.find(item => {
        return item.value === this.data.payStatus
      }))
      return list.payStatus.find(item => {
        return item.value === this.data.payStatus
      })
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    async getInfo () {
      this.loading = true
      const res = await getPlanInfo({id: this.obj.id})
      this.data = Object.assign({}, this.data, res)
      this.loading = false
    },
    onDetail (row, type) {
      console.log(row, type)
    }
  }
}
</script>

<style scoped lang="stylus"></style>
